<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点名表</title>
  <style>
    #show {
      width: 500px;
      height: 300px;
      font-size: 80px;
      color: #fff;
      background-color: #000;
      line-height: 300px;
      text-align: center;

    }
    #btn{
        width:300px;
        height:50px;
        font-size:28px;
        cursor:pointer;
    }
  </style>
</head>
<body>

<div>
  <button id="btn">
    开始点名
  </button>
  <h2 id="time">
    5
  </h2>
  <div id="show">
    点名即将开始
  </div>
</div>
<script>

  var oBtn = document.getElementById('btn');
  var oShow = document.getElementById('show');
  var oTime = document.getElementById('time');
  var arr = [
  '韩仕龙',
'贺志鑫',
'金志澳',
'李兵兵',
'娄晓东',
'卢成',
'刘韶阳',
'毛占领',
'秦鸿科',
'孙宇玺',
'史建鑫',
'王博',
'吴帆',
'邢振雨',
'徐志坤',
'赵冰',
'张文鹏',
'张雄科',
'安恒',
'曹鑫宇',
'李雷',
'索家睿',
'田鹏',
'袁豪鹏',
  ];

  /*点击事件*/
  var timer2 = null;
  var timer  = null;

  //boolean 类型 var flag = false ; true  / false
  // flag = !flag;
  oBtn.onclick = function () {
    // location.href = 'http://www.baidu.com'
    clearInterval(timer);
    clearInterval(timer2);
    //开始点名

    // 500 换一个
    timer = setInterval(function () {
      oShow.innerHTML = arr[getRandom(0, arr.length - 1)];
    }, 50);
    var i = 5;
    timer2 = setInterval(function () {
      oTime.innerHTML = --i;
    }, 1000);


    setTimeout(function () {
      clearInterval(timer);
      clearInterval(timer2);
    }, 5000);

  }

  function getRandom(x, y) {//3-30
    return Math.floor(Math.random() * (y - x + 1)) + x;
  }


</script>
</body>
</html>
